<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮组</title>
    <style>
        .btn {
            display: inline-block;
            border-radius: 10px;
            width: 80px;
        }

        /***
         * 情景色
         *  success
         *  danger
         *  warning
         *   info
         *  primary
        */

        .btn-success {
            color: white;
            background-color: green;
            border-color: transparent;
        }

        .btn-success:hover {
            background-color: #51ffcf;
        }

        .btn-danger {
            color: white;
            background-color: red;
            border-color: transparent;
        }

        .btn-danger:hover {
            background-color: #ff3d47;
        }

        .btn-primary {
            color: white;
            background-color: blue;
            border-color: transparent;
        }

        .btn-primary:hover {
            background-color: #47b6ff;
        }
        .btn-group .btn:first-child:not(:last-child) {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .btn-group .btn:last-child:not(:first-child) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
        .btn-group .btn:not(:last-child):not(:first-child) {
            border-radius: 0;
        }
        .btn-group .btn{
            float: left;
        }

    </style>
</head>
<body>
<div class="btn-group">
    <button class="btn btn-success">按钮1</button>
   <!-- <button class="btn btn-danger">按钮2</button>
    <button class="btn btn-primary">按钮3</button>-->
</div>
</body>
</html>